<template>
	<view class="u-page">
		<userheader page="shop" :post="{customer_id:customer.id}" v-on:onGetUserinfo="onGetUserinfo"/>
		<view class="container">
			<view class="box" v-if="customer.settle_type=='month'">
				<view class="title">
					月付账单
				</view>
				<view class="info">
					<view class="line">
						账单日期：每月{{customer.bill_date}}号
					</view>					
					<view class="line" v-if="last_month_yuefu && last_month_yuefu.bill && !last_month_yuefu.bill.is_pay">
						上月账单：{{last_month_yuefu.count || 0}}单，合计：￥{{last_month_yuefu.total_money || 0}}
						<view class="rightbox">
							<u-button size="mini" type="warning" text="支付" @click="yuefu(0)"></u-button>
						</view>
					</view>
					<view class="line" v-if="this_month_yuefu">
						本月账单：{{this_month_yuefu.count || 0}}单，合计：￥{{this_month_yuefu.total_money || 0}}
						<view class="rightbox">
							<u-button size="mini" type="warning" text="查看" @click="yuefu(1)"></u-button>
						</view>
					</view>
					<view class="line" v-if="month_buy">
						当月消费：{{month_buy.count}}单<text v-if="month_buy.total_money">，合计：￥{{month_buy.total_money}}</text>
					</view>
				</view>
			</view>
			<view class="item" @click="$navigateTo" data-url="index/card">
				<image src="../../static/icon/card.png"></image>
				<view class="title">
					我的卡券
				</view>
				<view class="rightbox">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="item" @click="$navigateTo" data-url="index/order">
				<image src="../../static/icon/shop.png"></image>
				<view class="title">
					配送订单
				</view>
				<view class="rightbox">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="item" @click="$navigateTo" data-url="shop/order">
				<image src="../../static/icon/clock.png"></image>
				<view class="title">
					商城订单
				</view>
				<view class="rightbox">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="item" @click="$navigateTo" data-url="buy/address/list">
				<image src="../../static/icon/driver.png"></image>
				<view class="title">
					配送地址
				</view>
				<view class="rightbox">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="item" @click="goRegister">
				<image src="../../static/icon/staff.png"></image>
				<view class="title">
					入驻资料
				</view>
				<view class="rightbox">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<u-tabbar value="user" @change="changeBar">
			<u-tabbar-item text="积分商城" name="shop">
				<image
					style="width: 40rpx;height: 40rpx;"
					slot="active-icon"
					src="/static/tabbar/shop_a.png">
				</image>
				<image
					style="width: 40rpx;height: 40rpx;"
					slot="inactive-icon"
					src="/static/tabbar/shop.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="会员中心" name="user">
				<image
					style="width: 42rpx;height: 42rpx;"
					slot="active-icon"
					src="/static/tabbar/my_a.png">
				</image>
				<image
					style="width: 42rpx;height: 42rpx;"
					slot="inactive-icon"
					src="/static/tabbar/my.png">
				</image>
			</u-tabbar-item> 
		</u-tabbar>
	</view>
</template>

<script>
	import {methods}  from '@/utils/methods.js';
	import userheader from '@/pages/components/userheader';
	export default{
		components: {
			userheader
		},
		data() {
			return {
				customer:'',
				month_buy:'',
				last_month_yuefu:'',
				this_month_yuefu:''
			}
		},
		created(e) {
			this.customer=this.$customer();
			if(!this.customer){
				this.$reLaunch('index/index');
				return;
			}
		},
		methods: {
			...methods,
			yuefu:function(current){
				this.$navigateTo('buy/yuefu?current='+current);
			},
			onGetUserinfo:function(e){
				this.month_buy=e.month_buy;
				this.last_month_yuefu=e.last_month_yuefu;
				this.this_month_yuefu=e.this_month_yuefu;
			},
			goRegister:function(){
				this.$navigateTo('index/register?customer_id='+this.customer.id);
			},
			changeBar:function(e){
				switch(e){
					case 'user':
					this.$redirectTo('index/user');
					break;
					case 'shop':
					this.$redirectTo('shop/index');
					break;
				}		
			}	
		}
	}
</script>

<style lang="scss">
.container{
	padding:0 20rpx;
	.box{
		padding: 10rpx;
		background-color: rgba(48, 216, 231, 0.3);
		font-size: 26rpx;	
		margin-bottom: 10rpx;
		.title{
			padding: 10rpx 0;
			font-weight: bold;
			font-size: 30rpx;
		}
		.info{			
			background-color: #fff;
			padding: 20rpx;
			.line{
				margin-bottom: 10rpx;
				padding-bottom: 20rpx;
				padding-top: 10rpx;
				border-bottom: 1px solid #f1f1f1;
				position: relative;
			}
			.line:last-child{
				border-bottom:0;
				margin-bottom:0;
				padding-bottom: 0;
			}
			.rightbox{
				position: absolute;
				right: 20rpx;
				width: 80rpx;
				top:4rpx;
			}
		}
	}
	.item{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 20rpx solid #fff;
		background-color: #ddfdfb;
		padding-left: 20rpx;
		height: 120rpx;
		.title{
			font-size: 36rpx;
			width: 70%;
			text-align: left;
		}
		.rightbox{
			width: 10%;
			text-align: right;
		}
		image{
			width: 80rpx;
			height: 80rpx;
		}
	}
	.item:first-child{
		border-top: 10rpx solid #fff;
	}
}
</style>
